<template>
  <el-affix offset="0">
    <div class="top" >
      <el-menu
          router
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
      >
        <el-menu-item index="0">
          <img
              style="width: 50px"
              src="../assets/logo.png"
              alt="Element logo"
          />
        </el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="/introduction">学车首页</el-menu-item>
        <el-menu-item index="/introduceCoach">金牌教练</el-menu-item>
        <el-menu-item index="/trainPlace">场地详情</el-menu-item>
        <el-menu-item index="/login">加入我们</el-menu-item>
      </el-menu>
    </div >
  </el-affix>
  <div class="content">
    <div class="left-content">
      <div class="profile-card">
        <div class="profile-header">
          <img src="http://img.yxueche.com/5dc85f50d2a7481dbbc8530f5ba7a853.jpg" alt="Instructor Photo" class="profile-photo">
          <div class="profile-info">
            <h2>罗教练 <span class="license-type">【C1,C2】</span></h2>
            <div class="rating">
              <span>★★★★★</span>
            </div>
            <ul class="stats">
              <li>通过人数 837</li>
              <li>好评人数 819</li>
              <li>训练场地 易学车鱼洞训练场</li>
            </ul>
          </div>
        </div>
        <div class="booking-section">
          <p>提交手机号码后，我们将为您快速匹配学车顾问，为您提供专业的学车顾问服务!</p>
          <div class="booking-form">
            <input type="text" placeholder="输入手机号，预约立减200元">
            <button type="button">立即预约</button>
          </div>
        </div>
      </div>
      <div class="profile-card">
        <div class="profile-header">
          <img src="http://img.yxueche.com/da3a823e153544929aa2c833adcac1b9.jpg" alt="Instructor Photo" class="profile-photo">
          <div class="profile-info">
            <h2>聂教练 <span class="license-type">【C1,C2】</span></h2>
            <div class="rating">
              <span>★★★★★</span>
            </div>
            <ul class="stats">
              <li>通过人数 837</li>
              <li>好评人数 819</li>
              <li>训练场地 易学车鱼洞训练场</li>
            </ul>
          </div>
        </div>
        <div class="booking-section">
          <p>提交手机号码后，我们将为您快速匹配学车顾问，为您提供专业的学车顾问服务!</p>
          <div class="booking-form">
            <input type="text" placeholder="输入手机号，预约立减200元">
            <button type="button">立即预约</button>
          </div>
        </div>
      </div>
      <div class="profile-card">
        <div class="profile-header">
          <img src="http://img.yxueche.com/a09e383d141442fc909cf81af0ae0bc4.jpg" alt="Instructor Photo" class="profile-photo">
          <div class="profile-info">
            <h2>廖教练 <span class="license-type">【C1,C2】</span></h2>
            <div class="rating">
              <span>★★★★★</span>
            </div>
            <ul class="stats">
              <li>通过人数 837</li>
              <li>好评人数 819</li>
              <li>训练场地 易学车鱼洞训练场</li>
            </ul>
          </div>
        </div>
        <div class="booking-section">
          <p>提交手机号码后，我们将为您快速匹配学车顾问，为您提供专业的学车顾问服务!</p>
          <div class="booking-form">
            <input type="text" placeholder="输入手机号，预约立减200元">
            <button type="button">立即预约</button>
          </div>
        </div>
      </div>
      <div class="profile-card">
        <div class="profile-header">
          <img src="http://img.yxueche.com/13f8bb53799b4a06a8f3858ffc912552.jpg" alt="Instructor Photo" class="profile-photo">
          <div class="profile-info">
            <h2>赵教练 <span class="license-type">【C1,C2】</span></h2>
            <div class="rating">
              <span>★★★★★</span>
            </div>
            <ul class="stats">
              <li>通过人数 837</li>
              <li>好评人数 819</li>
              <li>训练场地 易学车鱼洞训练场</li>
            </ul>
          </div>
        </div>
        <div class="booking-section">
          <p>提交手机号码后，我们将为您快速匹配学车顾问，为您提供专业的学车顾问服务!</p>
          <div class="booking-form">
            <input type="text" placeholder="输入手机号，预约立减200元">
            <button type="button">立即预约</button>
          </div>
        </div>
      </div>
    </div>
    <div class="right-content">
      <div class="calculator-card">
        <h2>我学车要花多少钱?</h2>
        <p>2秒算出拿证花费</p>
        <div class="cost">
          <span class="amount">0</span>元
        </div>
        <ul class="cost-breakdown">
          <li>班型学习费: <span class="amount">0</span>元</li>
          <li>科一考试费: <span class="amount">0</span>元</li>
          <li>科二考试费: <span class="amount">0</span>元</li>
          <li>科三考试费: <span class="amount">0</span>元</li>
        </ul>
        <div class="form-group">
          <label for="region">选择区域:</label>
          <select id="region" name="region">
            <option value="重庆市">重庆市</option>
            <!-- Add more options as needed -->
          </select>
        </div>
        <div class="form-group">
          <label for="class-type">所学班型:</label>
          <select id="class-type" name="class-type">
            <option value="学车无忧班小车">学车无忧班小车</option>
            <!-- Add more options as needed -->
          </select>
        </div>
        <div class="form-group">
          <label for="phone">手机号码:</label>
          <input type="text" id="phone" name="phone" placeholder="计算结果发送到手机">
        </div>
        <button type="button">立即计算</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IntroductionCoach"
}
</script>

<style scoped>
.top{
  width: 100%;
  height: 20vh;
}
.flex-grow{
  flex-grow: 1;
}
.content{
  display: flex;
  flex-wrap: wrap;
}
.left-content{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 80%;
}
.right-content{
  width: 20%;
}


body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.profile-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  padding: 20px;
}

.profile-header {
  display: flex;
  align-items: center;
}

.profile-photo {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin-right: 20px;
}

.profile-info h2 {
  margin: 0;
  font-size: 20px;
}

.license-type {
  font-size: 16px;
  color: grey;
}

.rating span {
  font-size: 24px;
  color: #ffcc00;
}

.stats {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  font-size: 14px;
  color: grey;
}

.stats li {
  margin: 5px 0;
}

.booking-section {
  margin-top: 20px;
}

.booking-section p {
  font-size: 14px;
  color: grey;
  margin-bottom: 10px;
}

.booking-form {
  display: flex;
}

.booking-form input {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.booking-form button {
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  outline: none;
}

.booking-form button:hover {
  background-color: #0056b3;
}

.calculator-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  padding: 20px;
  text-align: center;
}

h2 {
  font-size: 18px;
  margin: 0 0 10px 0;
}

p {
  font-size: 14px;
  color: grey;
  margin: 0 0 20px 0;
}

.cost {
  font-size: 48px;
  color: #007bff;
  margin: 20px 0;
}

.cost-breakdown {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  font-size: 14px;
  color: grey;
}

.cost-breakdown li {
  margin: 5px 0;
}

.amount {
  font-size: 24px;
  color: #007bff;
}

.form-group {
  margin: 10px 0;
  text-align: left;
}

label {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

select, input[type="text"] {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  outline: none;
}

button {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}

button:hover {
  background-color: #0056b3;
}
</style>